<template>
	<div class="bg">
		<goback title="店铺设置"></goback>
		
				
		<div class="card">
			<div class="card_title">企业介绍</div>
			
			<div class="inner_container">
				<div class="headbox_container" @click="openFileSelector">
					<img :src="head_img"/>
					<input type="file" placeholder="更换头像" @change="toggle_head" ref="file_btn" style="display: none;"/>
				</div>
				
				<div>
					<textarea class="introduce_input" placeholder="在此输入您想展示给他人的企业介绍" v-model="shopdata.description"></textarea>
					<button class="save_btn" @click="desc">保存</button>
				</div>
				
			</div>

		</div>
		
		<div class="card">
			<div class="card_title">回收秸秆</div>
			<table border="1" cellspacing="1">
				<tr>
					<th>秸秆类型</th>
					<th>需求数量(千克)</th>
					<th>预期价格(每千克)</th>
					<th>修改操作</th>
				</tr>
				<tr v-for="(item,index) in shopdata.buys">
					<td>{{item.name}}</td>
					<td>{{item.amount}}</td>
					<td>{{item.price}}</td>
					<td><button @click="deleteDom(index)">删除</button></td>
				</tr>
				
				<tr v-if="add_status" class="add_tr">
					<td><input v-model="product.name" placeholder="秸秆类型"></input></td>
					<td><input v-model="product.amount" placeholder="需求重量"></input></td>
					<td><input v-model="product.price" placeholder="回收价格"></input></td>
					<td><button @click="cancelAdd">取消</button></td>
				</tr>
				
			</table>
			

			
			
			<button class="save_btn" @click="toggle">{{text}}</button>
			<button class="save_btn" @click="save">保存</button>
		</div>
		
		
		<div class="card">
			<div class="card_title">回收类型</div>
			<div class="selector_box">
				<div><input :checked="shopdata.type=='ALL'" type="radio" name="type" value="ALL"  @click="saveTrade('ALL')">农户自配送和企业上门均支持</div>
				<div><input :checked="shopdata.type=='OnlyYourself'" type="radio" name="type" value="OnlyYourSelf"  @click="saveTrade('OnlyYourself')">农户自行配送上门</div>
				<div><input :checked="shopdata.type=='OnlySelf'" type="radio" name="type" value="OnlyMe"  @click="saveTrade('OnlySelf')">企业时间段内上门回收</div>
			</div>
		</div>
		<div class="card">
			<div class="card_title">其他设置</div>
			<div>
				<button class="save_btn" @click="$router.push('/daohang')">站点管理</button>
				<button class="save_btn" @click="$router.push('/address')">联系方式</button>
			</div>
		</div>
		
		<copyright></copyright>
		

	</div>
</template>

<script>
	export default {
		name: "shopsetting",
		data() {
			return {
				text: '新增',
				add_status: false,
				product:{
					name:null,
					amount:null,
					price:null
				},
				shopdata:{},
				head_img:'',
			};
		},
		mounted() {
			if(this.$route.query.shopid==null){
				alert('缺少shopid作为URL的参数');
				return;
			}
			this.getData();
			this.getSrc();
		},
		methods: {
			openFileSelector(){
				this.$refs.file_btn.click();
			},
			toggle_head(e){
				console.log(e);
				const files = event.target.files;
				if (files && files.length > 0) {
					// 获取第一个文件，如果用户可以选择多个文件，则可以根据需要处理多个文件  
					
					let formData = new FormData();
					formData.append('file', files[0]);
					formData.append('token', this.getStorage('token'));
					this.axios.post(`${this.IP}/upload_shop_headimg`, formData, {
						headers: {
							'Content-Type': 'multipart/form-data'
						}
					}).then(res => {
						this.$toast.showMessage(res.data);
						if (res.data.includes('成功')) {
							setTimeout(() => {
								location.reload();
							}, 1500)
						}
						// 处理响应...  
					}).catch(error => {
						console.log(error);
						// 处理错误...  
					});
					
				}
			},
			getSrc(){
				
				let url = `${this.IP}/shop_head/${this.$route.query.shopid}.jpg`
				this.axios.head(url).then(res => {
					 if (res.status == 200) {  
					        this.head_img = url
					    }  
				}).catch(error => {
					// 处理错误  
					this.head_img = `${this.IP}/shop_head/normal.jpg`
				});;;
				
			},
			cancelAdd(){
				this.text="新增";
				this.product = {
					name:null,
					amount:null,
					price:null
				}
			},
			toggle(){
				this.add_status = !this.add_status;
				if(this.add_status){
					this.text="完成";
				}else{
					if(this.product.name.trim != "" && this.product.price.trim != "" && this.product.amount.trim != ""){
						let obj = this.product;
						obj.price=parseFloat(this.product.price);
						obj.amount=parseFloat(this.product.amount);
						this.shopdata.buys.push(obj);
						this.product = {
							name:null,
							amount:null,
							price:null
						}
						this.save();
					}
					this.text="新增";
				}
			},
				
			desc(){
				this.axios.post(`${this.IP}/set_shop_desc`, {
					token: this.getStorage("token"),
					description: this.shopdata.description
				}).then(res => {
					console.log(res.data);
					this.$toast.showMessage(res.data);
				}).catch(error => {
					// 处理错误  
					console.error('请求出错：', error);
				});;
			},
			
			save(){
				this.axios.post(`${this.IP}/set_shop_buys`, {
					token: this.getStorage("token"),
					buys: this.shopdata.buys
				}).then(res => {
					console.log(res.data);
					this.$toast.showMessage(res.data);
				}).catch(error => {
					// 处理错误  
					console.error('请求出错：', error);
				});;
			},
			
			saveTrade(e){
				this.axios.post(`${this.IP}/set_shop_trade`, {
					token: this.getStorage("token"),
					trade: e
				}).then(res => {
					console.log(res.data);
					this.$toast.showMessage(res.data);
				}).catch(error => {
					// 处理错误  
					console.error('请求出错：', error);
				});;
			},
			
			getData(){
				this.axios.get(`${this.IP}/get_shop`, {
					params:{
						uid: this.$route.query.shopid
					}
				}).then(res => {
					console.log(res.data);
					this.shopdata=res.data;
					
				}).catch(error => {
					// 处理错误  
					console.error('请求出错：', error);
				});;
			},
			
			
			deleteDom(index){
				this.shopdata.buys.splice(index,1);
				console.log(this.shopdata);
			},
		}
	}
</script>

<style scoped>
	
	.headbox_container{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.headbox_container img{
		border-radius: 10px;
	}

	.selector_box{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
	}
	table {
		border-collapse: collapse;
		width: 90vw;
		text-align: center;
		margin: 0 auto;
		height: 15vh;
	}
	
	.headbox{
		display: flex;
		justify-content: center;
	}
	.inner_container img{
		width: 168px;
	}
	.inner_container{
		display:flex;
		flex-direction: row;
	}
	.introduce_input{
		width: 84vw;
		height: 10vw;
		border:1px solid #f2f2f2;
		padding: 2vw;
		margin: 1vw;
		word-wrap: break-word;
		word-break: break-all;
	}
	.card{
		display: flex;
		flex-direction: column;
	}
	.inner_container div{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}
	.inner_container div textarea{
		box-sizing: border-box;
		padding: 2vw;
		height: 14vw;
		width: 60vw;
	}
	.save_btn{
		padding: 1vw;
		margin: 2vw;
		border-radius: 10px;
		width: 20vw;
		align-self: flex-end;
	}
	
	.want_to_buy{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.add_tr input{
		width: 20vw;
		padding: 1vw;
		margin: 1vw;
		border: 1px solid #333;
	}
	.selector_box{
		padding: 2vw;
		margin: 1vw;
	}
	.selector_box *{
		font-size:28px;
	}
	.headbox_container input{
		max-width: 42vw;
	}
</style>